<template>
	<view>
		<view class="header">
			<view class="nav">
				<u-subsection :list="list" :current="curNow" mode="subsection" @change="sectionChange" activeColor="#00ff7f" inactiveColor="#ff5500"></u-subsection>
			</view> 
			<view style="width: 680rpx;margin: 0 auto ;">
					<u-search :show-action="true" actionText="搜索" :animation="true" inputAlign="center" @custom="searcher"></u-search>
			</view>
		</view>
		<view class="scroll">
			 <scroll-view class="scroll-l" scroll-y >
				 <view v-for="item in leftData" :key="item._id" class="ones" @tap="change(item._id)" :class="{'active': currentId==item._id}">
					 {{item.cat_name}}
				 </view>
			 </scroll-view>
			 <scroll-view class="scroll-r" scroll-y>
					<text class="title-food">{{currentData.cat_name}}</text>
					<view class="hot-itemAll">
						<view class="r-itemOne" v-for="items in currentData.children" :key="items.cat_id"  @tap="searcher(items.cat_name)">
								 <image :src="items.cat_icon"></image>
									<text >{{items.cat_name}}</text>
						</view>
					</view>
				
			 </scroll-view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				  list: ['分类', '食材'],
				 curNow: 0,
				 leftData:[],
				 currentId:0,
				 currentData:[]
			}
		},
		onLoad() {
			this.getType()
		},
		methods: {
			sectionChange(index) {
							this.curNow = index;
						},
		async getType(){
				const data=await this.$api.type.getType()
				this.leftData=data.message
				this.currentData=data.message[0]
				this.currentId=data.message[0]._id
	

		 },
		 change(id){
			 this.currentId=id
			 this.currentData=this.leftData.find(item=>item._id==id)
		 },
		 searcher(value){
			 console.log(value);
		 		uni.navigateTo({
		 			url:"../search/search?val="+value
		 		})
		 	
		 	
		 }
		}
	}
</script>

<style scoped lang="scss">
.header{
	height: 200rpx;
	background-color: #EE7B2D;
	overflow: hidden;
		.nav{
			width: 300rpx;
			margin: 40rpx auto 20rpx;
		}
	}
.scroll{
	height: calc(100vh - 200rpx);
	display: flex;
	justify-content: space-between;
	.scroll-l{
		width: 250rpx;
		height: 100%;
		.ones{
			height: 150rpx;
			line-height: 150rpx;
			text-align: center;
			border-right: 2px solid #dbdbdb;
			color: #a2a2a2;
		}
	}
	.scroll-r{
		width: 470rpx;
		text{
			color: #b6b6b6;
		}
		.hot-itemAll{
	
			
			display: flex;
			flex-wrap: wrap;
			
		
			.r-itemOne{
				width: 150rpx;
				height: 200rpx;
				margin-bottom: 20rpx;
		
				text-align: center;
				image{
					width: 150rpx;
					height: 150rpx;
				}
			}
		}
	}
	
}
.title-food{
	margin-top: 20rpx;
	display: block;	
}
.scroll .scroll-l .ones.active{
	color: #f09655;
	background-color: #f6f6f6;
	
}


</style>
